{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8"/>
    <title>IP地址资源管理系统</title>
    <link rel="stylesheet" type="text/css" href="{% static 'web/css/reset.css' %}"/>
    <style type='text/css'>
        body {
            background-color: #E5E8ED;
        }

        .container {
            /* border: 1px solid red; */
            background-image: url('{% static 'web/img/bg.jpg' %}');
            width: 100%;
            height: 500px;
            background-size: cover;
            text-align: center;
            padding-top: 250px;
        }

        .login {
            background-image: url('{% static "web/img/a.png" %}');
            background-size: 25em;
            background-position: -50px 50px;
            background-repeat: no-repeat;
            background-color: snow;
            width: 700px;
            height: 400px;
            margin: 0 auto;
            border-radius: 20px 20px 20px 20px;
            box-shadow: 5px 5px 10px gray;
        }

        .footer {

            margin: 10px auto;
            color: #939393;
        }

        h1 {
            font-size: 30px;
        }

        h6 {
            font-size: 12px;
        }

        .content {
            margin-top: 50px;
            margin-left: 300px;
            width: 400px;
            height: 220px;
            text-align: left;
        }

        .content img {
            line-height: 50px;
            height: 50px;
            vertical-align: middle;
            /* background-color: #eef6fd;
            border-bottom: 2px #d6e7fa solid; */
        }

        input {
            line-height: 50px;
            vertical-align: middle;
            height: 50px;
            width: 300px;
            outline: none;
            background: #eef6fd;
            border-bottom: 2px #d6e7fa solid;
            font-size: 18px;
            padding-left:10px;
        }

        .content div {
            margin-top: 20px;
            height: 50px;
        }

        .btn {
            border: none;
            color: #fff;
            width: 300px;
            text-align: center;
            background-color: #1592ef;
            text-indent: 0rem;
            border-radius: 10px;
            text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
            font-size: 20px;
            height: 50px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="login">
        <div class="title">
            <h1>IP地址资源管理系统</h1>
            <h6>IP address resource management system </h6>
        </div>
        <div class="content">
            <form method="post">
                {% csrf_token %}
                <div><img src="{% static 'web/img/username.png' %}"><input class="username" type="text" name="user"
                                                                           placeholder="用户名"/>
                </div>
                <div><img src="{% static 'web/img/pwd.png' %}"><input class="password" type="password" name="pwd"
                                                                      placeholder="密码"/>
                </div>
                <div><input class='btn' type="submit" value="登录"/></div>
                <div><span style="color: red;margin-left:30px;">{{ msg }}</span></div>
            </form>
        </div>
    </div>
    <div class="footer">Copyright &copy; 2020 All Rights Reserved 信息技术所</div>
</div>
</body>

</html>